<template>
  <el-dialog
    :model-value="show"
    title="登录个号"
    width="800px"
    append-to-body
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="login-loading-dialog"
    destroy-on-close
  >
    <div class="content">
      <el-button :loading="show" type="primary" link>
        启动个号中......
      </el-button>
      <div class="tips">
        <span class="weight-bold">tips：</span>
        <span>若更新个号密码，请及时记录至系统</span>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { testVmLogin, startFingerprint, fb_account_get } from '@/api/login';
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  info: {
    type: Object,
    default: () => {}
  }
});

const emit = defineEmits('update:show');

watch(
  () => props.show,
  val => {
    if (!val) return;
    openVmLogin();
  }
);

function close() {
  emit('update:show', false);
}

// 测试vmlogin是否打开;
async function openVmLogin() {
  try {
    await testVmLogin();
    getAccount();
  } catch {
    close();
  }
}

// 指纹出库;
async function getAccount() {
  try {
    await fb_account_get({ id: props.info.id, action: 'get' });
    strtFinaer();
  } catch {
    close();
  }
}

// 启动指纹
async function strtFinaer() {
  const _info = props.info;
  try {
    const res = await startFingerprint({
      profileId: _info.fb_account_id,
      skiplock: true
    });
    if (res.status === 'OK') {
      $msg.success('启动成功');
    } else {
      $msg.error(res.value);
    }
  } finally {
    close();
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 50px 0;
  text-align: center;
  font-size: 15px;
}
.tips {
  margin-top: 40px;
}
:deep(.el-button) {
  font-size: 18px;
  font-weight: bold;
}
</style>
<style>
.login-loading-dialog {
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}
</style>
